<template>
	<view style="">
		<view class="filter_cartoon">
			<view class="stick_top">
				<view class="filter_cartoon_top">
					<view class="filter_cartoon_top_left" @click="go_back">
						<image src="../../static/back_icon.png" style="width: 20px;height: 20px;"></image>
					</view>
					<view class="filter_cartoon_top_center">
						全部漫画
					</view>
					<view></view>
				</view>
				
				<view class="filter_cartoon_tab">
					<view class="tab_type">
						<view v-for="item in typeList" @click="changtype(item)" class="tab_item" :class="type_flag==item?'tab_item_active':''">
							{{item}}
						</view>
					</view>
					<view class="tab_state">
						<view v-for="item in stateList" @click="changstate(item)" class="tab_item" :class="state_flag==item?'tab_item_active':''">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="filter_cartoon_content">
				<ManhuaItem v-for="manhua in showmanhualist" :key="manhua.id" :manhua="manhua"></ManhuaItem>
			</view>
			<u-loadmore :status="status" />
			<view style="height: 10px;">
				
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	
	import ManhuaItem from '../../components/manhuaItem.vue'
	export default {
		data() {
			return {
				manhuaList: [],
				showmanhualist: [],
				status: 'loadmore',
				page: 12,
				typeList: ['全部', '恋爱','热血','古风','冒险','玄幻','动作','校园','修真','竞技','生活',
					'后宫','霸总','搞笑','穿越','战争','架空','悬疑','灵异','恐怖','励志','科幻',
					'同人','其他','真人',
				],
				type_flag: '全部',
				stateList: ['全部', '已完结', '连载中'],
				state_flag: '全部'
			}
		},
		components: {
			ManhuaItem
		},
		methods: {
			changstate(state) {
				this.status = 'nomore'
				this.page = 12
				this.state_flag = state
				uni.request({
					url:api + '/get_filter_cartoon/',
					method:'POST',
					data:{
						cartoonTag: this.type_flag,
						cartoonState: this.state_flag,
					},
					success:res=>{
						this.manhuaList = res.data.data
						this.showmanhualist = this.manhuaList.slice(0, 12)
					}
				})
			},
			changtype(type){
				this.status = 'nomore'
				this.page = 12
				this.type_flag = type
				uni.request({
					url:api + '/get_filter_cartoon/',
					method:'POST',
					data:{
						cartoonTag: this.type_flag,
						cartoonState: this.state_flag,
					},
					success:res=>{
						this.manhuaList = res.data.data
						this.showmanhualist = this.manhuaList.slice(0, 12)
					}
				})
			},
			onReachBottom() {
				this.page = this.page + 12
				if(this.manhuaList[this.page]){
					this.status = 'loading';
					setTimeout(() => {
						this.showmanhualist = this.manhuaList.slice(0, this.page)
					}, 1500)
				}else{
					this.status = 'nomore'
				}
				
			},
			go_back() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		},
		mounted() {
			uni.request({
				url:api + '/mobile_get_cartoon/',
				method:'GET',
				success:res=>{
					this.manhuaList = res.data.cartoon_list
					this.showmanhualist = this.manhuaList.slice(0, 12)
				}
			})
		}
	}
</script>

<style>
.filter_cartoon{
	padding-left: 5px;
	padding-right: 5px;
}
.stick_top{
	padding-top: 50px;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: white;
}
.filter_cartoon_top{
	display: flex;
	justify-content: space-between;
	padding-left: 5px;
}
.filter_cartoon_top_center{
	font-size: 18px;
	padding-right: 15px;
}
.tab_type{
	display: flex;
	justify-content: space-between;
	padding-left: 8px;
	flex-wrap: wrap;
}
.tab_state{
	display: flex;
	justify-content: flex-start;
	padding-left: 8px;
	padding-bottom: 15px;
}
.tab_item{
	margin: 10px 15px 0 0;
	font-size: 14px;
	padding-bottom: 5px;
}
.tab_item_active{
	font-weight: 700;
	padding-bottom: 2px;
	border-bottom: solid 2px skyblue;
}

.filter_cartoon_content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
</style>
